<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="./style/style.css">
    <link rel="stylesheet" type="text/css" href="./style/style-main.css">
    <link rel="stylesheet" type="text/css" href="./style/style-my.css">
    <link rel="stylesheet" type="text/css" href="./style/style-search.css">
    <link rel="stylesheet" type="text/css" href="./style/style-about.css">
    <link rel="stylesheet" type="text/css" href="./style/style-setting.css">
    <link rel="stylesheet" type="text/css" href="./style/style-home.css">
    <link rel="stylesheet" type="text/css" href="./style/style-title.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>轻音乐</title>
</head>

<body>
    <audio id="audioPlayer"></audio>
    <div class="container-control">
        <div class="custom-titlebar">
            <div class="titlebar-controls mac-controls">
                <div class="close-btn-mac" id="close-btn-mac"></div>
                <div class="min-btn-mac" id="minimize-btn-mac"></div>
                <div class="max-btn-mac" id="maximize-btn-mac"></div>
            </div>
            <div class="titlebar-title dark">繁星点点，山影如黛</div>
            <div class="titlebar-title light">白云朵朵，鼓舞欢忻</div>
            <div class="titlebar-controls windows-controls">
                <div class="titlebar-btn" id="minimize-btn">
                    <svg width="20" height="20" viewBox="0 0 24 24">
                        <path d=" M5,13h14c0.6,0,1-0.4,1-1s-0.4-1-1-1H5c-0.6,0-1,0.4-1,1S4.4,13,5,13z"
                            fill="currentColor" />
                    </svg>
                </div>
                <div class="titlebar-btn" id="maximize-btn">
                    <svg width="16" height="16" viewBox="0 0 24 24">
                        <path
                            d="M6 3H18C19.6569 3 21 4.34315 21 6V18C21 19.6569 19.6569 21 18 21H6C4.34315 21 3 19.6569 3 18V6C3 4.34315 4.34315 3 6 3ZM6 5C5.44772 5 5 5.44772 5 6V18C5 18.5523 5.44772 19 6 19H18C18.5523 19 19 18.5523 19 18V6C19 5.44772 18.5523 5 18 5H6Z"
                            fill="currentColor" />
                    </svg>
                </div>
                <div class="titlebar-btn-close" id="close-btn">
                    <svg width="20" height="20" viewBox="0 0 24 24">
                        <path
                            d="M5.3,18.7C5.5,18.9,5.7,19,6,19s0.5-0.1,0.7-0.3l5.3-5.3l5.3,5.3c0.2,0.2,0.5,0.3,0.7,0.3s0.5-0.1,0.7-0.3   c0.4-0.4,0.4-1,0-1.4L13.4,12l5.3-5.3c0.4-0.4,0.4-1,0-1.4s-1-0.4-1.4,0L12,10.6L6.7,5.3c-0.4-0.4-1-0.4-1.4,0s-0.4,1,0,1.4   l5.3,5.3l-5.3,5.3C4.9,17.7,4.9,18.3,5.3,18.7z"
                            fill="currentColor" />
                    </svg>
                </div>
            </div>
        </div>
    </div>
    <!-- 状态提示区域 -->
    <div id="player-status"></div>

    <div class="container">
        <!-- 左侧固定菜单栏 -->
        <div class="sidebar">
            <div class="logo">
                <div class="logo-img">音</div>
                <div class="logo-text">轻音乐</div>
            </div>
            <ul class="menu-items">
                <li class="menu-item active" data-page="home">
                    <img src="./images/tu1.png" alt="首页" class="main-icon">
                    <span>首页</span>
                </li>
                <li class="menu-item" data-page="search">
                    <img src="./images/tu2.png" alt="搜索" class="main-icon">
                    <span>搜索</span>
                </li>
                <li class="menu-item" data-page="settings">
                    <img src="./images/tu3.png" alt="设置" class="main-icon">
                    <span>设置</span>
                </li>
                <li class="menu-item" data-page="profile">
                    <img src="./images/tu4.png" alt="我的" class="main-icon">
                    <span>我的</span>
                </li>
            </ul>
            <div class="sidebar-footer">
                <li class="menu-item" data-page="about">
                    <img src="./images/tu5.png" alt="关于" class="main-icon">
                    <span>关于</span>
                </li>
            </div>
        </div>

        <!-- 右侧内容区域 -->
        <div class="main-content">
            <!-- 顶部固定搜索栏 -->
            <div class="top-bar">
                <div class="search-container">
                    <img src="./images/tu6.png" alt="搜索" class="search-icon">
                    <!-- <input type="text" placeholder="搜索歌曲、艺术家或专辑..."> -->
                    <input type="text" class="search-box" placeholder="搜索歌曲、艺术家或专辑..." id="searchInput">
                    <button class="search-button" id="searchButton">搜索</button>
                </div>
                <div class="profile-avatar-min" id="profileAvatar2">
                    <img src="./images/tu11.png" class="main-icon-min">
                </div>

            </div>

            <!-- 内容区域 -->
            <div class="content">
                <!-- 首页内容 -->
                <div class="page active" id="home">
                    <h2 class="page-title">随机播放</h2>
                    <div class="text-speak">
                        <p>不知道听什么，来看看缘分吧！！！</p>
                    </div>
                    <div class="card-container">
                        <div class="card">
                            <div class="card-header-random">
                                <h3>猜你喜欢</h3>
                                <div class="random-icon">
                                    <img src="./images/tu15.png" id="play-btn" class="main-icon-max">
                                </div>
                            </div>
                            <div class="card-body">
                                <div class="song-info-random">
                                    <div class="song-title-random" id="song-title">点击开始播放</div>
                                    <div class="song-artist-random" id="song-artist">艺术家</div>
                                    <div class="song-album-random" id="song-album">专辑名称</div>
                                </div>

                            </div>
                        </div>
                    </div>

                    <h2 class="page-title">每日推荐</h2>
                    <div class="text-speak">
                        <p>这里每日推荐20首歌曲，看看有没有喜欢的吧！！！</p>
                    </div>
                    <div class="card-container">
                        <div class="card">
                            <div class="card-header">
                                <h3>每日推荐</h3>
                            </div>

                            <div class="cards-container" id="cards-container">
                                <div class="loading">
                                    <div class="loading-spinner"></div>
                                    <p>正在加载音乐数据...</p>
                                </div>
                            </div>
                            <!-- 右键菜单 -->
                            <!-- <div id="context-menu" class="context-menu">
                                <div class="context-menu-item" id="play-menu-item">
                                    <i>▶</i> 播放
                                </div>
                                <div class="context-menu-divider"></div>
                                <div class="context-menu-item" id="favorite-menu-item">
                                    <i>❤</i> 收藏
                                </div>
                            </div> -->

                        </div>
                    </div>
                </div>

                <!-- 搜索界面 -->
                <div class="page" id="search">
                    <h2 class="page-title">音乐搜索</h2>
                    <!-- <div id="music-list-page" class="music-list-page">
                <div class="header">
                    <h1>🎵 音乐列表</h1>
                    <div class="random-btn-container">
                        <button id="randomPlayBtn" class="random-btn">
                            <span>🔀</span> 随机播放
                        </button>
                    </div>
                    <input type="text" class="search-box" placeholder="搜索歌曲、艺术家或专辑..." id="searchInput"
                        onkeyup="handleKeyUp(event)">
                </div> -->
                    <table class="music-table">
                        <thead>
                            <tr>
                                <th class="serial-number">序号</th>
                                <th class="title-column">标题</th>
                                <th class="artist-column">艺术家</th>
                                <th class="album-column">专辑</th>
                                <th class="duration-column">时长</th>
                                <th class="action-column">操作</th>
                            </tr>
                        </thead>
                        <tbody id="music-list">
                            <!-- 动态加载音乐数据 -->
                        </tbody>
                    </table>
                </div>

                <!-- 设置页面 -->
                <div class="page" id="settings">
                    <h2 class="page-title">系统设置</h2>
                    <div class="text-speak">
                        <p>管理您的账户偏好和系统配置。</p>
                    </div>


                    <div class="settings-grid">
                        <div class="setting-card">
                            <h3><img class="main-icon" src="./images/tu14.png"></i> 主题设置</h3>
                            <div class="form-group">
                                <select class="theme-selector" id="theme-selector">
                                    <option value="auto">跟随系统</option>
                                    <option value="light">浅色模式</option>
                                    <option value="dark">深色模式</option>
                                </select>
                            </div>
                            <div class="btn-container">
                                <button class="btn" id="save-btn">
                                    保存更改
                                </button>
                                <div class="notification" id="notification">设置已保存！</div>
                            </div>
                        </div>

                        <div class="setting-card">
                            <h3><img class="main-icon" src="./images/tu24.png"></i> 控制栏设置</h3>
                            <div class="form-group">
                                <select class="theme-selector" id="control-selector">
                                    <option value="windows">Windows模式</option>
                                    <option value="mac">红绿灯模式</option>
                                </select>
                            </div>
                            <div class="btn-container">
                                <button class="btn" id="save-btn-control">
                                    保存更改
                                </button>
                                <div class="notification" id="notification-control">设置已保存！</div>
                            </div>
                        </div>

                        <div class="setting-card">
                            <h3><img class="main-icon" src="./images/tu12.png"></i> 下载设置</h3>
                            <div class="setting-item">
                                <div class="setting-label">
                                    <strong>显示下载按钮</strong>
                                    <span>开启后显示下载按钮，关闭则隐藏</span>
                                </div>
                                <label class="switch">
                                    <input type="checkbox" id="downloadToggle">
                                    <span class="slider"></span>
                                </label>
                            </div>
                            <!-- <div class="setting-item">
                                <div class="setting-label">
                                    <strong>下载保存位置</strong>
                                    <input type="text" class="path-input" id="download-path" value="C:\Music" readonly>
                                </div>
                                <div class="path-selector">
                                    <button class="browse-btn" id="browse-btn">浏览</button>
                                </div>
                            </div> -->
                        </div>

                    </div>
                </div>

                <!-- 我的页面 -->
                <div class="page" id="profile">
                    <h2 class="page-title">个人资料</h2>

                    <div class="profile-header">
                        <div class="profile-avatar-container">
                            <div class="profile-avatar" id="profileAvatar"></div>
                            <input type="file" id="avatarUpload" class="file-input" accept="image/*">
                        </div>

                        <div class="profile-info">
                            <div class="info-item">
                                <div class="nickname-display">
                                    <h2 id="nicknameText">昵称</h2>
                                    <img class="main-icon-ex" id="editNickname" src="./images/tu9.png">
                                </div>
                                <div class="modal-overlay" id="nicknameModal">
                                    <div class="modal-content">

                                        <div class="modal-header">
                                            <h2>编辑昵称</h2>
                                            <img src="./images/tu10.png" class="main-icon-max" id="closeModal">
                                        </div>
                                        <div class="nickname-input">
                                            <input type="text" id="nicknameInput" placeholder="请输入您的昵称" maxlength="50">
                                            <div class="nickname-buttons">
                                                <button class="save-btn" id="saveNickname">保存</button>
                                                <button class="cancel-btn" id="cancelEdit">取消</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div>
                                <div class="nickname-display-min">
                                    <h3>个性签名：</h3>
                                </div>
                                <div class="nickname-display-ming">
                                    <h2 id="nicknameText2">无</h2>
                                    <img class="main-icon-ex-min" id="editNickname2" src="./images/tu9.png">
                                </div>
                                <div class="modal-overlay" id="nicknameModal2">
                                    <div class="modal-content">

                                        <div class="modal-header">
                                            <h2>编辑个性签名</h2>
                                            <img src="./images/tu10.png" class="main-icon-max" id="closeModal2">
                                        </div>
                                        <div class="nickname-input">
                                            <input type="text" id="nicknameInput2" placeholder="请输入您的个性签名"
                                                maxlength="50">
                                            <div class="nickname-buttons">
                                                <button class="save-btn" id="saveNickname2">保存</button>
                                                <button class="cancel-btn" id="cancelEdit2">取消</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- <div class="card-container" style="margin-top: 40px;">
                        <div class="card">
                            <div class="card-header">
                                <h3>暂无</h3>
                            </div>
                            <div class="card-body">
                                <p><strong>暂无:</strong> 暂无</p>
                                <p><strong>暂无:</strong> 暂无</p>
                                <p><strong>暂无:</strong> 暂无</p>
                                <p><strong>暂无:</strong> 暂无</p>
                            </div>
                        </div>

                        <div class="card">
                            <div class="card-header">
                                <h3>暂无</h3>
                            </div>
                            <div class="card-body">
                                <p><i class="fas fa-check-circle"></i> 暂无</p>
                                <p><i class="fas fa-comment"></i> 暂无</p>
                                <p><i class="fas fa-users"></i> 暂无</p>
                                <p><i class="fas fa-file-alt"></i> 暂无</p>
                                <p><i class="fas fa-code-branch"></i> 暂无</p>
                            </div>
                        </div>
                    </div> -->
                </div>

                <!-- 关于页面 -->
                <div class="page" id="about">
                    <h2 class="page-title">关于我们</h2>
                    <div class="fankui-one-ex">
                        <div class="image-container">
                            <img class="image-main" src="./images/icon.png">
                        </div>
                        <div class="text-speak">
                            <p>一个很简单的音乐软件--轻音乐</p>
                            <p>软件作者：暄妍</p>
                            <p>联系开发者：2058763315@qq.com</p>
                            <p>qq群：1040256013</p>
                        </div>
                        <div class="footer">
                            <p>Copyright © 2025 轻音乐</p>
                        </div>
                    </div>

                    <h2 class="page-title">相关链接</h2>
                    <div class="fankui-one">
                        <div class="fankui-two-ex">
                            <div class="top-row">
                                <div class="top-left">
                                    <div class="links-container">
                                        <a href="https://www.xuanyanya.com/admin.html" target="_blank"
                                            class="admin-link">
                                            音乐管理网站
                                        </a>
                                        <a class="qr-title">扫码查看所有版本</a>
                                    </div>
                                    <div class="qr-image-container">
                                        <img src="images/app.png" alt="轻音乐APP下载二维码" class="qr-image">
                                    </div>
                                </div>

                                <div class="links-container">
                                    <a href="https://www.xuanyanya.com" target="_blank" class="admin-link">
                                        官方网站（3.0版本）
                                    </a>

                                    <a href="https://www.xuanyanya.com/index-one.html" target="_blank"
                                        class="admin-link">
                                        1.0版本网站
                                    </a>

                                    <a href="https://www.xuanyanya.com/index-two.html" target="_blank"
                                        class="admin-link">
                                        2.0版本网站
                                    </a>

                                    <a href="https://www.xuanyanya.com" target="_blank" class="admin-link">
                                        Windows版本下载
                                    </a>

                                    <a href="https://www.xuanyanya.com/api/download/apk/qingyinyue2.2.apk"
                                        target="_blank" class="admin-link">
                                        Android版本下载
                                    </a>


                                </div>
                            </div>
                            <div class="social-buttons-container">
                                <div class="hover-preview"></div>
                                <div class="social-buttons">
                                    <div class="social-btn wechat" data-preview="./images/weixin1.png">
                                        <img src="./images/weixin.png" alt="微信">
                                    </div>
                                    <div class="social-btn qq" data-preview="./images/qq1.png">
                                        <img src="./images/qq.png" alt="qq">
                                    </div>
                                    <div class="social-btn douyin" data-preview="./images/douyin1.png">
                                        <img src="./images/douyin.png" alt="qq">
                                    </div>
                                    <div class="social-btn kushou" data-preview="./images/kushou1.png">
                                        <img src="./images/kushou.png" alt="qq">
                                    </div>
                                    <div class="social-btn bilibili" data-preview="./images/bilibili1.png">
                                        <img src="./images/bilibili.png" alt="qq">
                                    </div>

                                </div>
                            </div>
                        </div>
                    </div>
                    <h2 class="page-title">用户必读</h2>
                    <div class="text-speak">
                        <p>网站（软件）的作者是暄妍（网名），网站与软件涉及到的所有全部都由开发者个人所制作和运营，本网站以及软件完全免费；</p>
                    </div>

                    <div class="fankui-one">
                        <div class="fankui-two">
                            <h3 class="fankui-three">
                                <img class="main-icon" src="./images/tu7.png"> 开发者的话
                            </h3>
                            <p>1.本网站与软件只是个人的爱好业余项目，如果对你有帮助，那这就是这个网站与软件存在的意义；如果你在找成熟稳定无广的音乐软件，可以考虑其他的优秀软件。</p>
                            <p>2.软件分为android和windows版本，android版本只能在基于安卓系统的手机和模拟器中运行；对于不同设备遇到的不同问题，欢迎大家进行反馈。</p>
                            <p>3.本软件唯一发布渠道--官方网站，历史所有版本在夸克云盘（扫描二维码）；未在各大应用商店发布同名应用，谨防被骗。</p>
                            <p>4.本网站与软件没有客服，也没有微信公众号之类的官方账号，如果有问题请进群或网站右侧联系开发者。</p>
                            <p>5.本网站与软件的音乐文件均由开发者个人上传到服务器，若损害了您的权益，请联系开发者进行删除。</p>
                            <p>6.服务器会不定期进行升级或开发新功能，无法访问，请见谅。</p>
                            <p>7.音乐平台不易，请尊重版权，支持正版。</p>
                        </div>
                    </div>

                    <h2 class="page-title">反馈与建议</h2>

                    <div class="text-speak">
                        <p>您可以在此处反馈问题或求想听的音乐！！！</p>
                    </div>
                    <div class="fankui-one">
                        <div class="fankui-two">
                            <h3 class="fankui-three">
                                <img class="main-icon" src="./images/tu8.png"> 提交反馈
                            </h3>

                            <div class="fankui-seven">
                                <div>
                                    <label class="fankui-four">反馈内容</label>
                                    <textarea class="fankui-six" id="feedbackContent"
                                        placeholder="请详细描述您的反馈或建议..."></textarea>
                                </div>

                                <div>
                                    <label class="fankui-four">联系方式（可选）</label>
                                    <input type="text" id="contactInfo" class="fankui-eight" placeholder="邮箱或手机号">
                                </div>
                            </div>

                            <button class="button-one" id="submitButton">
                                提交反馈
                            </button>

                            <div class="status-message" id="statusMessage">
                                <span id="messageText"></span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="player-container">
        <div class="lyrics-container-preview" id="lyricsBox">
            <div class="loading">歌词显示区域</div>
            <div class="lyrics-content-preview"></div>
        </div>

        <!-- 播放控制区 -->
        <div class="playback-controls">
            <button class="fullscreen-btn" id="fullscreenBtn">
                <img class="control-icon" src="./images/tu13.png">
            </button>
            <button id="prevTrackBtn" class="control-btn"><img class="control-icon" src="./images/tu17.png"></button>
            <button id="playPauseBtn" class="play-control-btn"><img id="playPauseImg" class="play-pause-icon"
                    src="./images/tu15.png"></button>
            <button id="nextTrackBtn" class="control-btn"><img class="control-icon" src="./images/tu18.png"></button>

            <div class="volume-control">
                <button class="fullscreen-btn" id="soundBtn">
                    <img class="control-icon" id="sound-icon" src="./images/tu19.png">
                </button>
                <div class="volume-slider-container" id="volumeSliderContainer">
                    <input type="range" min="0" max="100" value="100" class="volume-slider" id="volumeSlider">
                    <div class="volume-value">
                        <span id="volumeValue">100</span>
                    </div>
                </div>
            </div>
        </div>

        <!-- 歌曲信息和进度条 -->
        <div class="info-progress-container">
            <!-- 歌曲信息（右侧上方） -->
            <div class="song-content">
                <div class="song-info">
                    <div id="currentSongTitle">未播放</div>
                    <div id="currentSongArtist">--</div>
                </div>
            </div>
            <!-- 进度条和时间（右侧下方） -->
            <div class="progress-section">
                <div class="time-display" id="currentTime">0:00</div>
                <div class="progress-container">
                    <input type="range" id="progressBar" min="0" max="100" value="0" class="progress-bar">
                </div>
                <div class="time-display" id="totalTime">0:00</div>
            </div>
        </div>
    </div>


    <div class="fullscreen-lyrics" id="fullscreenLyrics">

        <div class="fullscreen-header">
            <button class="max-fullscreen" id="maxFullscreen">
                <img src="./images/tu20.png" id="isfull" class="main-icon-max">
            </button>
            <button class="close-fullscreen" id="closeFullscreen">
                <img src="./images/tu10.png" class="main-icon-max">
            </button>
        </div>
        <!-- <div class="song-info-fullscreen">
            <h2 id="currentSongTitleFullscreen">夏天的风</h2>
            <p id="currentSongArtistFullscreen">温岚</p>
        </div> -->
        <div class="loading">歌词显示区域</div>
        <div class="lyrics-content-fullscreen">
            <!-- 全屏歌词内容将通过JavaScript渲染 -->
        </div>

    </div>

    <script>

    </script>
    <script src="./js/javascript-my.js"></script>
    <script src="./js/javascript-about.js"></script>
    <script src="./js/javascript-main.js"></script>
    <script src="./js/javascript-home.js"></script>
    <script src="./js/javascript-setting.js"></script>
    <script src="./js/javascript-search.js"></script>
    <!-- <script src="./js/yinghua.js"></script> -->
</body>

</html>